<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>简历列表</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/css/global.css" media="all">
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/table.css" />
</head>

<body>

<ul class="layui-nav layui-bg-blue" lay-filter="">
    <li class="layui-nav-item">
        <a href="javascript:;">用户：${user.name}</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="/resume/logout">退出登录</a></dd>
        </dl>
    </li>
</ul>

<div class="layui-btn-group demoTable" style="margin-top: 10px;">
    <a href="/resume/add" class="layui-btn">新增</a>
</div>


<table class="layui-table" id="resumeList" lay-filter="demo"></table>

<!--模板-->
<script type="text/html" id="tpl">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--    编辑弹出层-->
<script type="text/html" id="editForm">
    <div class="layui-col-md10" style="margin-left: 35px;margin-top: 20px">
        <form class="layui-form" lay-filter="edit_form">
            <input type="text" name="id" hidden>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" placeholder="请输入" required lay-verify="required" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" placeholder="请输入" required lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" placeholder="请输入" required lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登录用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>
</script>
<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
<script>
    layui.use(['element','table','form'], function() {
        var element = layui.element,
            table = layui.table,
            form = layui.form,
            $ = layui.jquery;

        var tableIndex = table.render({
            elem: '#resumeList',
            cellMinWidth: 150,
            url: '/resume/page',
            request: {
                pageName: 'pageNo', //页码的参数名称，默认：page
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            response: {
                statusName: 'code', //规定数据状态的字段名称，默认：code
                statusCode: 200, //规定成功的状态码，默认：0
                msgName: 'msg', //规定状态信息的字段名称，默认：msg
                countName: 'count', //规定数据总数的字段名称，默认：count
                dataName: 'data', //规定数据列表的字段名称，默认：data
            },
            cols: [
                [{
                    checkbox: true, fixed: true
                }, {
                    field: 'id',title: 'ID',align:'center',width:50,fixed: true,
                }, {
                    field: 'name',title: '姓名',align:'center',fixed: true
                }, {
                    field: 'address',title: '地址',align:'center',fixed: true
                }, {
                    field: 'phone',title: '手机号',align:'center',fixed: true
                }, {
                    field: 'operate',title: '操作',toolbar: '#tpl',fixed: 'right',unresize: true
                }]
            ],
            id: 'testReload',
            // skin: 'row', //表格风格
            even: true, //隔行背景
            event: true,
            page: true,
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.totalElements, //解析数据长度
                    "data": res.data.content //解析数据列表
                };
            },
            done : function(res, curr, count){
                layer.closeAll('loading');
            }
        });

        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                layer.open({
                    title:'修改',
                    type:1,
                    area:['600px','400'],
                    content:$('#editForm').html(),
                })
                form.render()//更新渲染表单
                form.val('edit_form',{
                    //填充表单
                    id:data.id,
                    name:data.name,
                    address:data.address,
                    phone:data.phone
                });

                //form提交事件
                form.on('submit(edit)',function(data){
                    var param = JSON.stringify(data.field)
                    console.log(param)
                    if (param == null) {return false}
                    if (param == undefined) {return false}
                    $.ajax({
                        url: "/resume/update",
                        type: "POST",
                        contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        data: param,
                        success: function (json) {
                            if (json.data) {
                                window.location.href = '/resume/main';
                            } else {
                                layer.msg(json.msg);
                            }
                        }
                    });
                });
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url: "/resume/delete",
                        type: "POST",
                        dataType: "json",
                        data: {"id" : data.id},
                        success: function (json) {
                            if (json.code == 200) {
                                layer.msg(json.msg, {time:3});
                                tableIndex.reload()
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>

</html>